import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hovue/common/values/images.dart';
import 'package:provider/provider.dart';
import 'package:hovue/providers/user_provider.dart';
import 'package:hovue/common/routers/pages.gr.dart';
import 'dart:ui';

@RoutePage()
class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  // 处理登录
  Future<void> _handleLogin() async {
    final username = _usernameController.text.trim();
    final password = _passwordController.text.trim();
    
    if (username.isEmpty || password.isEmpty) {
      EasyLoading.showError('username or password is empty');
      return;
    }
    
    EasyLoading.show(status: 'logging in...');
    
    final userProvider = Provider.of<UserProvider>(context, listen: false);
    final success = await userProvider.login(username, password);
    
    if (success) {
      EasyLoading.showSuccess('login success');
      // 跳转到主页
      if (context.mounted) {
        context.router.replaceAll([const MainRoute()]);
      }
    } else {
      EasyLoading.showError(userProvider.error ?? 'login failed');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图片
          Image.asset(
            Images.login, // 请确保您有合适的背景图片，可能需要更换为与示例相似的图片
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.cover,
          ),
          // 毛玻璃效果
          // BackdropFilter(
          //   filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
          //   child: Container(
          //     color: Colors.black.withOpacity(0.1),
          //     width: double.infinity,
          //     height: double.infinity,
          //   ),
          // ),
          // 内容
          SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                // 返回按钮
                Padding(
                  padding: EdgeInsets.only(left: 16.w, top: 16.h),
                  child: GestureDetector(
                    onTap: () => context.router.pop(),
                    child: Icon(
                      Icons.arrow_back_ios_new,
                      color: Colors.white,
                      size: 30.w,
                    ),
                  ),
                ),
                SizedBox(height: 40.h),
                // 欢迎文本
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 24.w),
                  child: Center(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(15.r),
                      child: BackdropFilter(
                        filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                        child: Container(
                          padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 16.h),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                'Welcome Back!',
                                style: GoogleFonts.inter(
                                  color: Colors.white,
                                  fontSize: 28.sp,
                                  fontStyle: FontStyle.italic,
                                  fontWeight: FontWeight.w900,
                                ),
                              ),
                              SizedBox(height: 8.h),
                              Text(
                                'log back into your account',
                                style: TextStyle(
                                  fontFamily: 'Inter',
                                  color: Colors.white,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.w700,
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                const Spacer(),
                // 用户名输入框
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 24.w),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(15.r),
                    child: BackdropFilter(
                      filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                      child: Container(
                        height: 60.h,
                        decoration: BoxDecoration(
                          color: Colors.white.withOpacity(0.2),
                          borderRadius: BorderRadius.circular(15.r),
                          border: Border.all(
                            color: Colors.white.withOpacity(0.3),
                            width: 2.w,
                          ),
                        ),
                        child: Center(
                          child: TextField(
                            controller: _usernameController,
                            style: TextStyle(
                              fontFamily: 'PingFang SC',
                              color: Colors.white,
                              fontSize: 18.sp,
                            ),
                            decoration: InputDecoration(
                              hintText: 'Username',
                              hintStyle: TextStyle(
                                fontFamily: 'PingFang SC',
                                color: Colors.white.withOpacity(0.7),
                                fontSize: 18.sp,
                              ),
                              border: InputBorder.none,
                              contentPadding: EdgeInsets.symmetric(horizontal: 24.w),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 20.h),
                // 密码输入框
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 24.w),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(15.r),
                    child: BackdropFilter(
                      filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
                      child: Container(
                        height: 60.h,
                        decoration: BoxDecoration(
                          color: Colors.white.withOpacity(0.2),
                          borderRadius: BorderRadius.circular(15.r),
                          border: Border.all(
                            color: Colors.white.withOpacity(0.3),
                            width: 2.w,
                          ),
                        ),
                        child: Center(
                          child: TextField(
                            controller: _passwordController,
                            obscureText: true,
                            style: TextStyle(
                              fontFamily: 'PingFang SC',
                              color: Colors.white,
                              fontSize: 18.sp,
                            ),
                            decoration: InputDecoration(
                              hintText: 'Password',
                              hintStyle: TextStyle(
                                fontFamily: 'PingFang SC',
                                color: Colors.white.withOpacity(0.7),
                                fontSize: 18.sp,
                              ),
                              border: InputBorder.none,
                              contentPadding: EdgeInsets.symmetric(horizontal: 24.w),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 60.h),
                // 登录按钮
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 24.w),
                  child: GestureDetector(
                    onTap: _handleLogin,
                    child: Container(
                      height: 60.h,
                      decoration: BoxDecoration(
                        color: const Color(0xFFB27256), // 图中的棕色按钮
                        borderRadius: BorderRadius.circular(15.r),
                      ),
                      child: Center(
                        child: Text(
                          'Login',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.sp,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                SizedBox(height: 15.h),
                // 服务条款和隐私政策
                Center(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'By Continuing you agree with ',
                        style: TextStyle(
                          fontFamily: 'Inter',
                          color: const Color.fromRGBO(255, 255, 255, 0.6),
                          fontSize: 10.sp,
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          // 跳转到服务条款页面
                        },
                        child: Text(
                          'Terms of Service',
                          style: TextStyle(
                            fontFamily: 'Inter',
                            fontSize: 10.sp,
                            color: Colors.white,
                            decoration: TextDecoration.underline,
                            decorationColor: Colors.white,
                            decorationStyle: TextDecorationStyle.solid,
                          ),
                        ),
                      ),
                      Text(
                        ' & ',
                        style: TextStyle(
                          fontFamily: 'Inter',
                          color: const Color.fromRGBO(255, 255, 255, 0.6),
                          fontSize: 10.sp,
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          // 跳转到隐私政策页面
                        },
                        child: Text(
                          'Privacy Policy',
                          style: TextStyle(
                            fontFamily: 'Inter',
                            fontSize: 10.sp,
                            color: Colors.white,
                            decoration: TextDecoration.underline,
                            decorationColor: Colors.white,
                            decorationStyle: TextDecorationStyle.solid,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 20.h),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
